<template>
    <div v-show="setting.status"
        :class="'right_menu right_menu_' + theme"
        :style="{ width: itemSize.width + 'px', top: setting.y + 'px', left: setting.x + 'px' }">
        <template v-for="(item, index) in data" :key="'a'+index">
            <RightMenuItem :data="item" :item-size="itemSize" :left="setting.x" :theme="theme"
                :top="setting.y + index * itemSize.height"></RightMenuItem>
            <div v-if="item.outline" :class="'right_menu_outline right_menu_outline_' + theme"></div>
        </template>
    </div>
</template>

<script lang="ts" setup>
import RightMenuItem from "./RightMenuItem.vue";

const props = defineProps({
    data: <any>Array,
    theme: String,
    setting: <any>Object,
    itemSize: <any>Object
})


function close() {
    // this.$parent.close();
}
</script>

<style scoped>
.right_menu {
    box-shadow: 1px 1px 8px 2px rgba(0, 0, 0, 0.3);
    position: fixed;
    padding: 4px 2px;
}

.right_menu_light {
    /* background: #f3f3f3; */
    background: #ffffff;
    border-radius: 8px;
}

.right_menu_dark {
    border: 1px solid #bbbbbb;
    background: #282828;
}

.right_menu_outline {
    width: 90%;
    border: 1px solid #656565;
    margin: 3px 0 3px 5%;
}

.right_menu_outline_light {
    background: #aaaaaa;
}

.right_menu_outline_dark {
    background: #bbbbbb;
}
</style>
